<template>
    <div class="stats-container">
      <h2 class="title">总体统计分析</h2>
      
      <el-table :data="examStats" border style="width: 100%" class="stats-table">
        <el-table-column prop="index" label="序号" width="120" align="center"></el-table-column>
        <el-table-column prop="name" label="考试名称" width="220" align="center"></el-table-column>
        <el-table-column prop="total" label="考试人数" width="160" align="center"></el-table-column>
        <el-table-column prop="pass" label="及格人数" width="160" align="center"></el-table-column>
        <el-table-column prop="passRate" label="及格率" width="160" align="center">
          <template #default="scope">
            <span :class="getRateClass(scope.row.passRate)">{{ scope.row.passRate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="excellentRate" label="优秀率" width="160" align="center">
          <template #default="scope">
            <span :class="getRateClass(scope.row.excellentRate)">{{ scope.row.excellentRate }}</span>
          </template>
        </el-table-column>
      </el-table>
      
      <h2 class="title" style="margin-top: 30px;">各试题类型正确率统计分析</h2>
      
      <div class="question-type-charts">
        <div class="chart-card" v-for="(item, index) in questionTypeStats" :key="index">
          <div class="chart-title">{{ item.type }}</div>
          <div class="chart-value">{{ item.rate }}</div>
          <div class="chart-container">
            <div :id="'chart-' + index" class="mini-chart"></div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    data() {
      return {
        examStats: [
          { index: 1, name: '2023年语文第一次月考', total: 100, pass: 55, passRate: '60%', excellentRate: '34%' },
          { index: 2, name: '2023年语文第二次月考', total: 100, pass: 76, passRate: '76%', excellentRate: '12%' },
          { index: 3, name: '2023年语文第三次月考', total: 100, pass: 12, passRate: '12%', excellentRate: '11%' }
        ],
        questionTypeStats: [
          { type: '单选题', rate: '89%', value: 89 },
          { type: '多选题', rate: '49%', value: 49 },
          { type: '判断题', rate: '78%', value: 78 }
          // 移除了填空题
        ],
        charts: []
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.initCharts();
      });
    },
    methods: {
      getRateClass(rate) {
        const value = parseInt(rate);
        if (value >= 70) return 'high-rate';
        if (value >= 40) return 'medium-rate';
        return 'low-rate';
      },
      initCharts() {
        this.questionTypeStats.forEach((item, index) => {
          const chartDom = document.getElementById(`chart-${index}`);
          const chart = echarts.init(chartDom);
          
          const option = {
            series: [{
              type: 'gauge',
              startAngle: 90,
              endAngle: -270,
              pointer: { show: false },
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                  color: this.getGaugeColor(item.value)
                }
              },
              axisLine: {
                lineStyle: {
                  width: 10
                }
              },
              splitLine: { show: false },
              axisTick: { show: false },
              axisLabel: { show: false },
              detail: { show: false },
              data: [{
                value: item.value
              }]
            }]
          };
          
          chart.setOption(option);
          this.charts.push(chart);
          
          window.addEventListener('resize', () => {
            chart.resize();
          });
        });
      },
      getGaugeColor(value) {
        if (value >= 70) return '#67C23A';  // 绿色
        if (value >= 40) return '#E6A23C';  // 黄色
        return '#F56C6C';                   // 红色
      }
    },
    beforeDestroy() {
      this.charts.forEach(chart => {
        chart.dispose();
      });
      window.removeEventListener('resize', this.resizeHandler);
    }
  };
  </script>
  
  <style scoped>
  .stats-container {
    padding: 20px;
    background-color: #f5f7fa;
    max-width: 1000px; /* 限制容器最大宽度 */
    margin: 0 auto; /* 居中显示 */
  }
  
  .title {
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 18px;
  }
  
  .stats-table {
    margin-bottom: 30px;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    font-size: 14px;
  }
  
  .high-rate {
    color: #67C23A;
    font-weight: bold;
  }
  
  .medium-rate {
    color: #E6A23C;
    font-weight: bold;
  }
  
  .low-rate {
    color: #F56C6C;
    font-weight: bold;
  }
  
  .question-type-charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 改为3列布局 */
    gap: 20px;
  }
  
  .chart-card {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 220px; /* 调整卡片高度 */
    display: flex;
    flex-direction: column;
  }
  
  .chart-title {
    font-size: 16px;
    color: #606266;
    margin-bottom: 10px;
  }
  
  .chart-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  .chart-container {
    flex: 1;
    min-height: 120px;
  }
  
  .mini-chart {
    width: 100%;
    height: 100%;
  }
  
  @media (max-width: 768px) {
    .stats-container {
      padding: 15px;
      max-width: 100%;
    }
    
    .question-type-charts {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .chart-card {
      height: auto;
      padding: 15px;
    }
  }
  </style>